// 预约相关页面样式

@import '../theme';

.appointment-container{
  background: @color-back-gray!important;
  .title-bar{
    font-size: @font-size5;
    color: @color-font-black;
    padding:@space-middle;
    padding-left:@space-lg;
    background: white;
    >p:first-of-type{
      position: relative;
      &::before{
        content: '';
        display: inline-block;
        position: absolute;
        background: @color-back-red;
        width: 2px;
        top: 3px;
        left: -8px;
        height: 0.9em;
      }
    }
  }

  .detail-wrap{
      padding: 0 @space-middle;
      background: white;
      .detail-box{
        border-top: 1px solid @border-color-base;
        .detail-item{
          display: flex;
          font-size: @font-size4;
          color: @color-font-gray;
          margin:  @space-base 0;
          letter-spacing: 1px;
          >span:first-of-type{
            flex-basis: 5.5em;
            flex-shrink: 0;
          }
        }
        .detail-tip {
          font-size: @font-size0;
          padding-bottom: @space-middle;
        }
      }
  }

  .station-wrap{
    background: white;
    margin-top: @space-middle;
    .title-bar{
      padding-bottom: 0;
    }
    .station-item{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin:0 @space-middle;
      padding: @space-middle 0;
      border-bottom: 1px solid @border-color-base;
      .item-left{
        flex-grow: 1;
        .app-icon{
          margin-left: @space-base;
        }
        .am-checkbox-agree{
          padding: 0!important;
          margin-left: 0!important;
        }
        .am-checkbox-agree .am-checkbox-inner{
          top: 2px!important;
          width: 16px!important;
          height: 16px!important;
        }
        .am-checkbox-agree .am-checkbox-agree-label{
          margin-left: 23px!important;
        }
        .am-checkbox-agree .am-checkbox{
          width: 23px!important; 
        }
        .am-checkbox.am-checkbox-checked .am-checkbox-inner{
          border-color: @color-back-red;
          background: @color-back-red;
        }
        .am-checkbox-inner:after{
          right: 3px!important;
        }
        p{
          font-size: @font-size3;
          color: @color-font-gray;
        }
        .item-flag{
          margin-left: 2rem;
          font-size: @font-size0;
          margin-top:@space-base;
          >span{
            margin-right: @space-base;
          }
          .flag-cpk{
            color: #53DDB4;
            border:1px solid #53DDB4;
            padding: 0.1rem @space-sm;
            border-radius: @border-radius-base;
          }
          .flag-fwh{
            color: #FF995A;
            border:1px solid #FF995A;
            padding: 0.1rem @space-sm;
            border-radius: @border-radius-base;
          }
          .flag-xyx{
            color: #DF7CE5;
            border:1px solid #DF7CE5;
            padding: 0.1rem @space-sm ;
            border-radius: @border-radius-base;
          }
        }
    
      }
      .item-right{
        align-self: flex-start;
        font-size: @font-size3;
        color: @color-font-gray;
        .app-icon{
          margin-right: @space-sm;
        }
      }
    }
  }
}


.modal-tips{
  font-size: @font-size4;
  color: @color-font-black;
}